﻿@{
    ViewData["Title"] = "MemberView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">会员卡管理</li>
        <li>等级设置</li>
        <li>领卡协议</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

            <div id="lop">
                <p style="margin: 10px">
                    非认证服务号不可开启微信原生会员卡功能支持
                    <button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;" id="jumpBtn" lay-event="jumpBtn">
                        编辑会员卡
                    </button>
                    <button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;" id="enableBtn" lay-event="enableBtn">启用</button>
                    <button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;" id="disableBtn" lay-event="disableBtn">停用</button>


                </p>
                <p style="margin: 10px">
                    微信原生会员卡功能可允许会员将领取到的会员卡同步至微信卡包并使用
                </p>
            </div>
            <div id="lop">
                <h3 style="margin: 10px">基本设置</h3>
                <p style="margin: 10px">
                    会员卡标题 &emsp;<span id="memberCardTitle"></span>
                </p>
            </div>
            <div id="lop">
                <h3 style="margin: 10px">会员卡详情</h3>
                <div class="layui-form-item">
                    <label class="layui-form-label">特权介绍</label>
                    <div class="layui-input-block">
                        <textarea id="description" class="layui-textarea" readonly></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用须知</label>
                    <div class="layui-input-block">
                        <textarea id="instructions" readonly class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">操作提示</label>
                    <span id="promptAction"></span>
                    @*   <div class="layui-input-block">
                    <span id="promptAction"></span>
                    </div> *@
                </div>

            </div>
            <div id="lop">
                <h3 style="margin: 10px">激活设置</h3>
                <div class="layui-form-item">
                    <label class="layui-form-label">激活条件</label>
                    <div class="layui-input-block">
                        <span id="activationConditions"></span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">会员资料</label>
                    <div class="layui-input-block">
                        <table class="layui-table" id="demoTable" lay-filter="demoTable">
                            <tbody>
                                @* 动态加载 *@
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="lop">
                <h3 style="margin: 10px">等级规则</h3>
                
                <div class="layui-form-item">
                   
                    <div class="layui-form">
                        <label class="layui-form-label">成长值依据:</label>
                        <input type="radio" name="basis" value="累计消费" title="累计消费" checked />
                        <br/>
                        <input type="radio" name="basis" value="累计积分" title="累计积分" />
                        <br /> 
                        <input type="radio" name="basis" value="累计间夜数" title="累计间夜数" style="margin-left: 10px" />
                        <br/>
                    </div>
                </div>
               

               
                <div class="layui-form-item">
                    <label class="layui-form-label">成长值清除规则:</label>
                    <div class="layui-form">
                        <input type="radio" name="roles" value="1" title="永久有效" checked />
                        <br />
                        <input type="radio" name="roles" value="2" title="每个自然年扣除成长值" />
                        <br />
                        <input type="radio" name="roles" value="3" title="激活/升降级后每1个月扣除成长值" />
                        <br />
                        <input type="radio" name="roles" value="4" title="每年获得的所有成长值在次年1月1日清零" />
                        <br />
                        <input type="radio" name="roles" value="5" title="逐笔过期：每笔消费满100元，扣除10元，每笔积分满100分，扣除1分，每笔间夜数满100分，扣除1分。" />
                        <br />
                        <span style="color:#9797a1">注：有效期规则修改后将对所有未过期的成长值生效</span>
                    </div>
                </div>

            </div>
            <div id="lop">
                <h3 style="margin: 10px">基本信息</h3>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <table class="layui-table" id="growthTable" lay-filter="growthTable">
                           <tobdy>

                           </tobdy>
                        </table>
                    </div>
                </div>
            </div>


        </div>
        <div class="layui-tab-item">

            <div id="lop">
                <div class="layui-form-item">
                    <label class="layui-form-label">领卡须知</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入详细地址" class="layui-textarea">顾客登记日当天可领取会员卡，次日即可进行消费积点</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">领卡须知确认</label>
                    <div class="layui-form">
                        <input type="radio" name="makeSure" value="1" title="关闭" checked>
                        <input type="radio" name="makeSure" value="2" title="选中">
                        <span style="color:#69b4ee">启用后，在用户领卡前，会弹窗告知用户领卡须知，需用户手动确认。</span>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;">保存</button>
        </div>
    </div>

</div>


<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element'], function () {


        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;


        //会员卡详情
        GetMemberCard();
        function GetMemberCard() {
            $.ajax({
                url: 'http://localhost:5174/api/MemberCard/GetMemberCard',
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) {
                    console.log(data.data);
                    document.getElementById("memberCardTitle").innerHTML = data.data.memberCardTitle;
                    document.getElementById("instructions").value = data.data.instructions;
                    document.getElementById("description").innerHTML = data.data.description;
                    document.getElementById("promptAction").innerHTML = data.data.promptAction;
                    data.data.activationConditions == 1 ? document.getElementById("activationConditions").innerHTML = "普通激活" : data.data.activationConditions == 2 ? document.getElementById("activationConditions").innerHTML = "付费激活" : document.getElementById("activationConditions").innerHTML = "充值激活";



                    var btn = document.getElementById('jumpBtn');
                    var disbtn = document.getElementById('disableBtn');
                    var enbtn = document.getElementById('enableBtn');
                    if (data.data.memberCardState == true) {
                        btn.disabled = true;
                        btn.style.backgroundColor = "white";
                        btn.style.color = "#999";
                        btn.style.border = "none";
                        disbtn.disabled = true;
                        disbtn.style.backgroundColor = "white";
                        disbtn.style.color = "#999";
                        disbtn.style.border = "none";
                    }
                    else if (data.data.memberCardState == false) {
                        enbtn.disabled = true;
                        enbtn.style.backgroundColor = "white";
                        enbtn.style.color = "#999";
                        enbtn.style.border = "none";

                    }




                    // form.render();
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }
        //会员信息
        GetMemberInfo();
        function GetMemberInfo() {
            $.ajax({
                url: 'http://localhost:5174/api/MemberInfo/GetMemberInfo',
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) {
                    console.log(data.data);
                    table.render({
                        elem: '#demoTable',
                        data: data.data,
                        //  toolbar: '#toolbarDemo',
                        cols: [[
                            { field: 'memberInfoName', title: '信息名称', width: 200 },
                            {
                                field: 'menberInfoState', title: '是否必填', align: 'center', templet: function (d) {
                                    // 根据数据中的某个条件使用三目运算符返回不同的值
                                    return d.menberInfoState == 1 ? '必填' : '';
                                }
                            },

                            {
                                field: 'menberInfoModifted', title: '是否可修改', align: 'center', templet: function (d) {
                                    return d.menberInfoModifted == "" ? "可修改" : "不可修改";
                                }
                            },
                        ]],
                        done: function (res, curr, count) {
                            // 选择客户信息列的单元格并设置高度
                            $('.layui-table-cell[field="Client"]').css('height', '60px');
                        },
                        //  page: true
                    });
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }


        //会员等级成长值
        GetMemberGrowth();
        function GetMemberGrowth() {
            $.ajax({
                url: 'http://localhost:5174/api/MemberLevel/GetMemberLevelGrowths',
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) {
                    console.log(data.data);
                    table.render({
                        elem: '#growthTable',
                        data: data.data,
                        //  toolbar: '#toolbarDemo',
                        cols: [[
                            { field: 'identification', title: '等级编号', width: 200 },
                            {
                                field: 'memberLevelName', title: '等级名称', align: 'center',
                            },

                            {
                                field: 'growthRange', title: '成长值范围', align: 'center'
                            }
                                // { toolbar: '#bardemo', title: '等级权益', align: 'center' }
                        ]],
                        done: function (res, curr, count) {
                            // 选择客户信息列的单元格并设置高度
                            $('.layui-table-cell[field="Client"]').css('height', '60px');
                        },
                        //  page: true
                    });
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }





       //跳转到编辑会员卡页面
        document.getElementById('jumpBtn').addEventListener('click', function () {
            window.location.href = 'MemberEdit';
        });


        $(document).on('click', '[lay-event="disableBtn"]', function () {
            UpdateStateMemberCard(0)
            GetMemberCard();
        });
        //点击按钮禁用会员卡
        //点击按钮关闭弹框
        $(document).on('click', '[lay-event="enableBtn"]', function () {
            UpdateStateMemberCard(1)
            GetMemberCard();
        });


        function UpdateStateMemberCard(state) { 
            $.ajax({
                url: 'http://localhost:5174/api/MemberCard/DeactivateVIP',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify({
                    state: state
                }),
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) { 
                    console.log(data);
                    if (data.code == 1) {
                        if (state == 0) {
                            layer.msg('会员卡停用成功');
                        }
                        else {
                            layer.msg('会员卡启用成功');
                        }
                       
                    }
                    else
                    {
                        layer.msg('会员卡停用失败');
                    }
                },
                error: function (xhr, status, error) { 
                
                    console.log(xhr.responseText);
                    }
            })


        }

    });
</script>





<style>
    #lop {
        margin-top: 30px;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 5px
    }
</style>


